<template>
    <div class="u-chartsBox">
        <div class="legend" :class="[type,position]" v-if="!disLegend">
            <span v-for="(item,index) in legend" :key="index">
                <i :style="'background:'+ item.color +';'"></i>{{item.name}}
            </span>
        </div>
        <div class="chartsM" :id="'chartsBox_bar'+keyId"></div>
    </div>
</template>
<script>
export default {
    name:'UBarEchart',
    props:{
        keyId:{},               //唯一echart
        disLegend: Boolean,     //不显示标签
        type:{                  //标签的图标类型 pie圆点   
            type: String,
            default: "pie"
        },
        position:{              //标签的位置  默认右上
            type: String,
            default: "right"
        },
        xAxisName:{},
        yMax:{
            type: Number,
            default: 5
        },
        yAxisName:{},
        legend: Array,
        list: Array,
        markVal:{},
        hasDiff: Boolean,            //有不同类型柱子（非自身比较）
        fontNomal:Boolean,
        hasLine: Boolean,
        ishasBackground:{
            type: Boolean,
            default: true
        },
        xAxisType:{
            type: String,
            default: 'category'
        },
        isStack: Boolean,   //合并到一行
        showLabel:Boolean,  //显示数值
        barWidth:{
            type: Number,
            default: 20
        },   
        grid:{
            type: Object,
            default: function(){
                return {
                        top:0,
                        left:0,
                        right:0,
                        bottom:0
                    }
            }
        }               
    },
    data(){
        return{
            chartsObj: null,
            option:{}
        }
    },
    mounted(){
        this.initChart()
    },
    methods:{
        initChart(){
            this.chartsObj = this.$echarts.init(document.getElementById('chartsBox_bar'+this.keyId));
            let len = this.list[0].value.length
            let dataAxis = []                   //横坐标
            let dataInfo = {} ;
            let seriesItem = {
                type: 'bar',
                barWidth:this.barWidth,
                itemStyle: {
                    barBorderRadius: this.isStack?'':[18, 18, 0, 0]
                },
                showBackground: this.ishasBackground,
                backgroundStyle:{
                    color:'#f4f5f9',
                    barBorderRadius: [5, 5, 0, 0]
                },
            }

            let seriesData = []
            dataAxis = this.list.map(({name}) => name)
            
            if(this.hasDiff){
                this.list.forEach((item, index) => {
                    let spec = this.legend.filter(itemled =>{ return item.key&&item.key==itemled.key})[0]
                    if(spec){
                        let {itemcolor,color,isSign} = spec
                        item.itemcolor = itemcolor
                        item.color = isSign?color:'#747e93'
                    }
                })
            }

            if(len==1){
                this.list.forEach((item, index) => {
                    let value = item.value[0]
                    let spec = this.legend.filter(item =>{ return value<=item.max&&value>item.min})[0]
                    if(spec && !item.key){
                        let {itemcolor,color,isSign} = spec
                        item.itemcolor = itemcolor
                        item.color = isSign?color:'#747e93'
                    }
                });
            }

            for(let i=0; i<len; i++){
                dataInfo[i] = this.list.map(item => {
                    return item.value[i]
                })
                let itemStyle = {...seriesItem.itemStyle}
                itemStyle.color = new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: this.legend[i].itemcolor[0]},
                        {offset: 1, color: this.legend[i].itemcolor[1]}
                    ]
                )
                seriesData.push({...seriesItem,itemStyle,data:dataInfo[i],name:this.legend[i].name})
            }
            if(this.hasLine){
                let lineLeg = this.legend.filter(item => {return item.type == 'Line'})
                for(let i=0; i<lineLeg.length; i++){
                    let itemStyle ={}
                    let lineInfo = this.list.map(item => {
                        return item.lineval[i]
                    })
                    seriesData.push({
                        type: 'line',
                        data:lineInfo,
                        name:lineLeg[i].name,
                        symbolSize:15,
                        symbol:'circle',
                        lineStyle:{
                            width:4,
                            shadowColor: 'rgba(253, 182, 40, .4)',
                            shadowBlur: 16,
                            shadowOffsetY:5,
                        },
                        itemStyle:{
                            color: lineLeg[i].color,
                            borderColor:'#fff',
                            borderWidth:5
                        }
                    })
                }
            }
            
            // let reslist = Object.values(dataInfo); // list 转换成功的数据     
            let {left,right,top,bottom} = this.grid

            this.option = {
                legend: {
                    show: false,
                },
                grid:{
                    left: left?left:40,
                    right: right?right:(this.xAxisName?70:0),
                    top: top?top:60,
                    bottom:bottom?bottom:60,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle:{
                            color: 'rgba(57,100,247,0.1)',
                        },
                        z:1
                    },
                    formatter: (params)=>{
                        let item = params[0]
                        if(params.length==1){
                            return item.name+'<br><span class="tooltip_span">'+item.value+'</span>分'
                        }else{
                            let spanVal = ""
                            params.forEach(every => {
                                let color
                                if(every.componentSubType =='bar') color = every.color.colorStops[0].color
                                if(every.componentSubType =='line') color = every.color
                                spanVal +='<br><span><i class="tooltip_icon" style="background:'+color+'"></i>'+every.seriesName+"："+every.value+'</span>'
                            })
                            return '<span class="tooltip_title">'+item.name+'</span>'+spanVal
                        }
                    },
                    backgroundColor: "#ffffff",
                    padding: 16,
                    textStyle:{
                        color:"#333333",
                        lineHeight: 30
                    },
                    extraCssText: 'box-shadow: 0 1px 10px rgba(59, 100, 168, 0.2); min-width: 160px; min-height:90px;'
                },
                xAxis: {
                    data: dataAxis,
                    name: this.xAxisName,
                    axisLabel: {
                        rotate:this.fontNomal?'':'40',
                        textStyle:{
                            color:(params,index) =>{
                                return this.list[index].color?this.list[index].color:'#747e93'
                            }
                        },
                        // formatter:(value) => {
                        //     if(value&&value.length>6)
                        //         return value.substring(0,4) + "...";
                        //     return value;
                        // }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    name: this.yAxisName,
                    nameGap: 30,
                    max: this.yMax,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle:{
                            color:"#ebeef2"
                        },
                    },
                    nameTextStyle: {
                        align:'left'
                    }
                },
                textStyle:{
                    color: '#747e93',
                    fontSize: 16,
                },
                series: seriesData
            };
            if(this.xAxisType == 'value'){
                this.option.xAxis = {
                    type: 'value',
                    show:false,
                }
                this.option.yAxis =  {
                    type: 'category',
                    data: dataAxis,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                }
            }
            if(this.isStack){
                seriesData.forEach((item,index) => {
                    item.stack = "总量"
                })
            }

            if(this.showLabel){
                seriesData.forEach((item,index) => {
                    item.label = {
                        show: true,
                        position: 'inside',
                        color:"#fff"
                    }
                })
            }


            if(len == 1)
                this.option.series[0].itemStyle.color = (params) =>{
                    let {dataIndex} = params
                    return new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1, 
                        [
                            {offset: 0,color: this.list[dataIndex].itemcolor[0]}, 
                            {offset: 1,color: this.list[dataIndex].itemcolor[1]}
                        ]) // 颜色渐变显示
                }
            else{
                
            }
            if(this.markVal) {
                this.option.series[0].markLine = {
                    silent: true,
                    data: [
                        {
                            yAxis: this.markVal,
                            name: '对比数',
                        }
                    ],
                    symbol:"none",
                    label:{
                        show: false
                    },
                    lineStyle:{
                        color: "rgba(219,222,229,0.8)",
                        width: 2,
                    },
                }
            }

            // 使用刚指定的配置项和数据显示图表。
            this.chartsObj.setOption(this.option);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
        setChart(chartData){
            chartData = chartData || {}
            this.chartsObj.hideLoading()
            this.chartsObj.setOption(chartData);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
    }
}
</script>